<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>Apaxy - Responsive Bootstrap 4 Admin Dashboard | Docs</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
        <meta content="Themesdesign" name="author" />
        <!-- App favicon -->
        <link rel="shortcut icon" href="assets/images/favicon.ico">

        <!-- Bootstrap Css -->
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- Icons Css -->
        <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
        <!-- App Css-->
        <link href="assets/css/app.min.css" rel="stylesheet" type="text/css" />

    </head>

    <body data-sidebar="dark">

        <!-- Begin page -->
        <div id="layout-wrapper">

            <header id="page-topbar">
                <div class="navbar-header">
                    <div class="d-flex">
                        <!-- LOGO -->
                        <div class="navbar-brand-box">
                            <a href="index.html" class="logo logo-dark">
                                <span class="logo-sm">
                                    <img src="assets/images/logo-sm-dark.png" alt="" height="22">
                                </span>
                                <span class="logo-lg">
                                    <img src="assets/images/logo-dark.png" alt="" height="20">
                                </span>
                            </a>

                            <a href="index.html" class="logo logo-light">
                                <span class="logo-sm">
                                    <img src="assets/images/logo-sm-light.png" alt="" height="22">
                                </span>
                                <span class="logo-lg">
                                    <img src="assets/images/logo-light.png" alt="" height="20">
                                </span>
                            </a>
                        </div>

                        <button type="button" class="btn btn-sm px-3 font-size-24 header-item waves-effect" id="vertical-menu-btn">
                            <i class="mdi mdi-backburger"></i>
                        </button>

                    </div>

                    <div class="d-flex">

                        <div class="d-inline-block">
                            <h5><span class="badge badge-danger float-right">v1.0.0</span></h5>
                        </div>
            
                    </div>
                </div>
            </header>

            <!-- ========== Left Sidebar Start ========== -->
            <div class="vertical-menu">

                <div data-simplebar class="h-100">

                    <!--- Sidemenu -->
                    <div id="sidebar-menu">
                        <!-- Left Menu Start -->
                        <ul class="metismenu list-unstyled" id="side-menu">
                            <li class="menu-title">Docs</li>

                            <li>
                                <a href="index.html" class="waves-effect">
                                    <i class="mdi mdi-file-document-box-outline"></i>
                                    <span>Getting Started</span>
                                </a>
                            </li>

                            <li>
                                <a href="setup.html" class=" waves-effect">
                                    <i class="mdi mdi-settings-outline"></i>
                                    <span>Setup</span>
                                </a>
                            </li>

                            <li>
                                <a href="plugins.html" class=" waves-effect">
                                    <i class="mdi mdi-apps"></i>
                                    <span>Plugins</span>
                                </a>
                            </li>

                            <li class="menu-title">Layouts</li>

                            <li>
                                <a href="vertical.html" class=" waves-effect">
                                    <i class="mdi mdi-flip-horizontal"></i>
                                    <span>Vertical</span>
                                </a>
                            </li>

                            <li>
                                <a href="horizontal.html" class=" waves-effect">
                                    <i class="mdi mdi-flip-vertical"></i>
                                    <span>Horizontal</span>
                                </a>
                            </li>

                            <li class="menu-title">Themes</li>

                            <li>
                                <a href="dark.html" class=" waves-effect">
                                    <i class="mdi mdi-weather-night"></i>
                                    <span>Dark Version</span>
                                </a>
                            </li>

                            <li>
                                <a href="rtl.html" class=" waves-effect">
                                    <i class="mdi mdi-web"></i>
                                    <span>RTL Version</span>
                                </a>
                            </li>

                            <li class="menu-title">Other</li>

                            <li>
                                <a href="changelog.html" class=" waves-effect">
                                    <i class="mdi mdi-format-list-bulleted"></i>
                                    <span>Changelog</span>
                                </a>
                            </li>

                        </ul>

                    </div>
                    <!-- Sidebar -->
                </div>
            </div>
            <!-- Left Sidebar End -->

            <!-- ============================================================== -->
            <!-- Start right Content here -->
            <!-- ============================================================== -->
            <div class="main-content">

                <div class="page-content">
                    <div class="container-fluid">

                        <!-- start page title -->
                        <div class="row">
                            <div class="col-12">
                                <div class="page-title-box d-flex align-items-center justify-content-between">
                                    <h4 class="mb-0 font-size-18">Vertical Layouts</h4>

                                    <div class="page-title-right">
                                        <ol class="breadcrumb m-0">
                                            <li class="breadcrumb-item"><a href="javascript: void(0);">Docs</a></li>
                                            <li class="breadcrumb-item active">Vertical Layouts</li>
                                        </ol>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>     
                        <!-- end page title -->

                        <div class="card">
                            <div class="card-body">
                                <div class="p-lg-1">
                                    <p>
                                        You can change or customize the left side navigation very easily.
                                    </p>
                                </div>

                                <div class="p-lg-1 mt-1">
                                    <h5 class="mt-0 mb-2 font-size-16">How to add new menu items/change menu items?</h5>

                                    <p>
                                        In order to add, change or remove menu items from the left side navigation, simply edit in file
                                        <code>src/partials/sidebar.html</code>. The change would reflect in all the html files automatically. 
                                        We are using <a href="https://www.npmjs.com/package/gulp-file-include"><code>gulp-file-include</code></a> which would actually take 
                                        care of including the <code>sidebar.html</code> file content in all the html pages.
                                    </p>
                                </div>

                                <div class="p-lg-1 mt-1">
                                    <h5 class="mt-0 mb-2 font-size-16">How to change width?</h5>
                                    <p>In order to change the width of left side navigation bar, open a file 
                                        <code>src/assets/scss/_variables.scss</code> and change the value of variable 
                                        <code>$sidebar-width</code>. The default value is set to <code>250px</code>.
                                    </p>
                                </div>

                                <div class="row mb-2 mt-3">
                                    <div class="col">
                                        <h5 class="mt-0 mb-2 font-size-16">How to use pre-built layouts?</h5>
                                        <p>
                                            Each of the layout options is provided below with steps you would need to perform:
                                        </p>
                                    </div>
                                </div>

                                <div class="row">

                                    <div class="col-lg-4 col-md-6">
                                        <div class="border p-3 text-center mb-3">
                                            <img src="assets/images/demo/vertical-2.jpg" alt="image" class="img-fluid shadow"/>
                                            <h5 class="font-weight-semibold font-size-16 mt-3">Light Sidebar</h5>
                                            Remove data attribute <code>data-sidebar="dark"</code> body element to have light sidebar.
                                        </div>
                                    </div> <!-- end col -->

                                    <div class="col-lg-4 col-md-6">
                                        <div class="border p-3 text-center mb-3">
                                            <img src="assets/images/demo/vertical-3.jpg" alt="image" class="img-fluid shadow"/>
                                            <h5 class="font-weight-semibold font-size-16 mt-3">Small Sidebar</h5>
                                            Keep your body element with data attribute <code>data-sidebar-size="small"</code> E.g. <code> &lt;body data-sidebar-size="small"&gt;</code> to have small sidebar.
                                        </div>
                                    </div> <!-- end col -->

                                    <div class="col-lg-4 col-md-6">
                                        <div class="border p-3 text-center mb-3">
                                            <img src="assets/images/demo/vertical-4.jpg" alt="image" class="img-fluid shadow"/>
                                            <h5 class="font-weight-semibold font-size-16 mt-3">Icon Sidebar</h5>
                                            Keep your body element with class <code>vertical-collpsed"</code> E.g. <code> &lt;body class="vertical-collpsed"&gt;</code> to have icon sidebar.
                                        </div>
                                    </div> <!-- end col -->

                                    <div class="col-lg-4 col-md-6">
                                        <div class="border p-3 text-center mb-3">
                                            <img src="assets/images/demo/vertical-5.jpg" alt="image" class="img-fluid shadow"/>
                                            <h5 class="font-weight-semibold font-size-16 mt-3">Boxed Layout</h5>
                                            Keep your body element with class <code>vertical-collpsed</code> and data attribute <code>data-layout-size="boxed" data-keep-enlarged="true"</code> E.g. <code> &lt;body class="vertical-collpsed" data-layout-size="boxed" data-keep-enlarged="true"&gt;</code> to have boxed layout with icon view sidebar.
                                        </div>
                                    </div> <!-- end col -->

                                    <div class="col-lg-4 col-md-6">
                                        <div class="border p-3 text-center">
                                            <img src="assets/images/demo/vertical-6.jpg" alt="image" class="img-fluid shadow"/>
                                            <h5 class="font-weight-semibold font-size-16 mt-3">Dark / Primary Topbar</h5>
                                            Keep your body element with data attribute <code>data-topbar="dark"</code> E.g. <code> &lt;body data-topbar="dark"&gt;</code> to have dark topbar. For primary topbar add data attribute <code>data-topbar="colored"</code>
                                        </div>
                                    </div> <!-- end col -->

                                </div>
                                <!-- end row -->

                            </div>
                        </div>


                    </div> <!-- container-fluid -->
                </div>
                <!-- End Page-content -->

                
                <footer class="footer">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-6">
                                2019 - 2020 © Apaxy.
                            </div>
                            <div class="col-sm-6">
                                <div class="text-sm-right d-none d-sm-block">
                                    Crafted with <i class="mdi mdi-heart text-danger"></i> by <a href="https://themesdesign.in/" target="_blank" class="text-muted">Themesdesign</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </footer>
            </div>
            <!-- end main content-->

        </div>
        <!-- END layout-wrapper -->

        <!-- JAVASCRIPT -->
        <script src="assets/libs/jquery/jquery.min.js"></script>
        <script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
        <script src="assets/libs/metismenu/metisMenu.min.js"></script>
        <script src="assets/libs/simplebar/simplebar.min.js"></script>
        <script src="assets/libs/node-waves/waves.min.js"></script>

        <script src="assets/js/app.js"></script>

    </body>
</html>
